<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/commodityManagement'">
            <div class="vs-search-box vs-post-top">
                <div class="flex jc-sb">
                    <el-radio-group v-model="sex_type" @change="styleChange">
                        <el-radio-button label="354">女款</el-radio-button>
                        <el-radio-button label="353">男款</el-radio-button>
                    </el-radio-group>
                    <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                        <el-form-item v-search-box-enter label="关键字：" prop="keys">
                            <el-input v-model="paging.keys" style="width: 200px" clearable placeholder="请输入关键字">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" class="vs-right-btns">
                            <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                            <!-- <el-button @click="addDemandNote" class="vs-m-l-20" type="primary">新增要货单</el-button> -->
                        </el-form-item>
                    </el-form>
                </div>
                <div class="content_o">
                    <div v-loading="isType">
                        <el-tree :expand-on-click-node="false" @node-click="nodeClick" class="filter-tree vs-tree-box"
                            :data="productType" node-key="id" :props="{ label: 'title' }" default-expand-all
                            :filter-node-method="filterNode" ref="tree">
                            <div class="vs-w-180" slot-scope="{ node }">
                                <vs-tooltip :content="node.label"></vs-tooltip>
                            </div>
                        </el-tree>
                    </div>
                    <div>
                        <div v-loading="loading" :class="{ 'jc-c': tableData.length == 0 }" class="finished-product">
                            <div v-for="item in tableData" :key="item.id" @click="setRow(1, item)"
                                class="product-chind">
                                <el-image style="width: 200px; height: 150px" :src="item.images[0]"
                                    fit="cover"></el-image>
                                <div class="product-title">{{ item.title }}</div>
                                <div class="vs-m-b-10">
                                    <el-tag v-if="item.colourInfo" size="medium">{{ item.colourInfo.title }}</el-tag>
                                    <el-tag v-if="item.sizeInfo" class="vs-m-l-5" size="medium" type="success">{{
                                        item.sizeInfo.title
                                    }}</el-tag>
                                </div>
                                <div class="product-price">
                                    零售价：{{ item.sale_price }}
                                </div>
                            </div>
                            <el-empty v-if="tableData.length == 0" description="暂无数据"></el-empty>
                        </div>
                        <div class="vs-paging-box">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page.sync="paging.page" :page-size="paging.limit"
                                layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100, 200, 500, 1000]"
                                :total="paging.total"> </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            isImport: false,
            isType: false,//类型loading
            sex_type: "354",//男女款
            productType: [],//成品类型
            paging: {
                title: '',
                number: '',
                page: 1,
                total: 0,
                limit: 100,
                order: '',
                keys: '',
            },
            tableData: [],
            active: 0,
        };
    },
    async created() {
        if (this.$route.path == '/commodityManagement') {
            await this.getGoodsCategoryCheng()
            this.paging.roughcast = this.productType?.[0]?.id;
            this.$nextTick(() => {
                this.$refs.tree.setCurrentKey(this.productType?.[0]?.id)
            })
            this.getGoods();
        }
    },
    filters: {
        roughcast_typeFilter(val) {
            let arr = ['标准', '定制'];
            return arr[val - 1];
        },
    },
    methods: {
        addDemandNote() {
            this.utils.goUrl(`/commodityManagementInfo?type=2`);
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.title.indexOf(value) !== -1;
        },
        nodeClick(val) {
            if (this.paging.roughcast == val.id) return;
            this.paging.roughcast = val.id;
            this.handleCurrentChange(1)
        },
        sex_typeFn(row) {
            if (row.sex_type) {
                if (row.sex_type == 353) {
                    return '男款';
                } else {
                    return '女款';
                }
            }
        },
        async styleChange() {
            await this.getGoodsCategoryCheng();
            this.paging.roughcast = this.productType?.[0]?.id;
            this.$nextTick(() => {
                this.$refs.tree.setCurrentKey(this.productType?.[0]?.id)
            })
            this.handleCurrentChange(1)
        },
        async getGoodsCategoryCheng() {
            this.isType = true;
            let { code, data } = await this.$Http.getGoodsCategoryCheng({ sex_type: this.sex_type });
            this.isType = false;
            if (code) {
                // let list = [];
                // for(let key in data){
                //     list.push(...data[key])
                // }
                this.productType = data.roughcast;
            }
        },
        fileImport() {
            //文件导入
            this.utils.importFile.call(
                this,
                'importGoods',
                (sta, res) => {
                    //请求完成后的回调 sta:是否上传成功  res上传成功后的返回值
                },
                { type: Number(this.active) + 1 }
            );
        },
        sortChange(column) {
            if (column.order == 'ascending') {
                this.paging.order = column.prop + ' asc';
            } else if (column.order == 'descending') {
                this.paging.order = column.prop + ' desc';
            } else {
                this.paging.order = '';
            }
            this.getGoods();
        },
        add() {
            this.utils.goUrl(`/commodityManagementInfo?type=1`);
        },
        async handleClick() {
            this.paging.keys = "";
            if (this.active == 5) {
                await this.getGoodsCategoryCheng()
                this.paging.roughcast = this.productType?.[0]?.id;
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(this.productType?.[0]?.id)
                })
            } else {
                this.paging.roughcast = "";
            }
            this.handleCurrentChange(1)
        },
        openInfo() {
            this.$prompt('请输入核验码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^\d+$/,
                inputErrorMessage: '核验码格式不正确',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let { code, data } = await this.$Http.checkOrder({
                            check_code: instance.inputValue,
                        });
                        if (code) {
                            this.$message.success('提交成功!');
                            this.handleCurrentChange(1);
                        }
                        done();
                        instance.confirmButtonLoading = false;
                    } else {
                        done();
                    }
                },
            })
                .then(({ value }) => { })
                .catch(() => { });
        },
        async setRow(type, row) {
            if (type == 1) {
                this.utils.goUrl(`/commodityManagementInfo?id=${row.id}&shopType=6&type=1`);
            } else if (type == 2) {
                this.$confirm('请注意，你确定要删除此商品吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    let res = await this.$Http.delGoods({ id: row.id });
                    if (res.status == 'success') {
                        if (this.tableData.length == 1) {
                            this.paging.page -= 1;
                            this.paging.page = this.paging.page < 1 ? 1 : this.paging.page;
                        }
                        this.$message.success('删除成功');
                        await this.handleCurrentChange(1);
                    }
                });
            }
        },
        async getGoods() {
            let obj = Object.assign({}, this.paging);
            obj.type = 6;
            obj.is_group = 1
            this.loading = true;
            let { code, data } = await this.$Http.getGoods(obj);
            this.loading = false;
            if (code) {
                data.data.forEach(v => {
                    v.images = v.images ? v.images.split(',') : [];
                })
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.tableData = [];
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.getGoods();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.getGoods();
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}

.content_o {
    min-height: 500px;
    padding: 20px 0;
    display: flex;

    >div {
        &:nth-child(1) {
            width: 180px;
        }

        &:nth-child(2) {
            padding-left: 40px;
            flex: 1;
            min-width: 600px;
        }
    }

    .finished-product {
        display: flex;
        flex-wrap: wrap;
        min-height: 400px;

        .product-chind {
            cursor: pointer;
            width: 200px;
            margin: 0px 10px 20px;

            .product-title {
                font-style: 18px;
                font-weight: 600;
                margin: 10px 0;
            }
        }
    }
}

.filter-tree {
    position: sticky;
    top: 0;
    z-index: 99;
    text-align: center;

    ::v-deep {
        .el-tree-node__content {
            justify-content: center;
        }

        .el-icon-caret-right {
            display: none;
        }
    }
}
</style>
